<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0js/vue.js"></script>
</head>
<body>

<div id="root">
<!--    <h2 :style="{opacity}">欢迎{{name}}</h2>-->
</div>

<script type="text/javascript">
    // 阻止vue在启动时生成生产提示
    Vue.config.productionTip = false

    /**
     * 生命周期函数，生命周期回调，生命周期钩子， 都一个意思
     */
    const vm = new Vue({
        el:"#root",
        template: `
          <div>
            <h2 :style="{opacity}">欢迎{{name}}</h2>
            <button @click="bye">销毁</button>
          </div>
        `,
        data: {
            name: "冯镠霖",
            opacity: 1
        },
        methods:{
          bye() {
              console.log("d")
              this.$destroy()
          }
        },
        beforeCreate() {},
        created() {},
        beforeMount() {},
        // vue模板完成模板的解析，并把真实的dom元素放入页面后调用
        mounted() {
            /*setInterval(() => {
                vm.opacity -= 0.1
                if (vm.opacity <= 0) {
                    vm.opacity = 1
                }
            },200)*/
            console.log(this.$el)
            console.dir(this.$el)
        },
        beforeUpdate() {

        },
        updated() {

        },
        beforeDestroy(){},
        destroyed(){
            // 销毁后组件的实例自定义事件全都不能用了
            this.$destroy()
        }

    });
</script>
</body>
</html>